<template>
    <el-skeleton animated :rows="16" :loading="gjloading">
    <div>
        <el-page-header content="新增配置" title="返回" @back="goback">

        </el-page-header>
    </div>
    <div style="margin-top: 20px">
        <el-descriptions :column="2" border direction="vertical" title="配置新增">
            <el-descriptions-item label="名称" :span="2">
                <el-input placeholder="输入配置名称" v-model="name"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="权限" width="1">
            <el-tree :data="dataes" :props="defaultProps" :default-checked-keys="checked" node-key="id" show-checkbox @check="rightchange" />
        </el-descriptions-item>
        <el-descriptions-item label="组织" width="1">
            <el-tree :data="datatree" :props="defaultPropstwo" node-key="id" show-checkbox @check-change="zuzhichange">

                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <template v-if="CheckedData.length > 0">
                            <template v-for="item in CheckedData">
                                <template v-if="data.id == item.oid">
                                    <el-tag :key="item2.id" v-for="item2 in item.children" size="mini"
                                        style="margin-left:10px">{{ item2.name
                                        }}</el-tag>
                                </template>
                            </template>
                        </template>
                    </span>
                </template>
            </el-tree>
        </el-descriptions-item>
        <el-descriptions-item label="操作">
            <el-button type="primary" @click="xz">
                新增
            </el-button>
        </el-descriptions-item>
        </el-descriptions>
    </div>
</el-skeleton>
    <el-dialog title="选择组织·职务" :closeOnClickModal="false" draggable v-model="dialogzuzhiVisible" v-if="dialogzuzhiVisible"
        :destroy-on-close="true" :show-close="true" width="60%">
        <el-skeleton :rows="8" :loading="zuzhiload" animated>
            <div id="treeA">
                <el-tag type="info" size="large">tips:选择全部则代表后续添加进来的职务也会包含,
                    而全部单个选中所有职务则不会包含后续职务</el-tag>
                <div class="mytable" style="margin-top:10px;text-align: left;">
                    <el-checkbox-group v-model="checkList">
                        <template v-for="item in list">
                            <el-checkbox style="width:100px;margin-left:10px;margin-top: 10px;" :key="item.id"
                                v-if="item.isBan == 0" :label="item.id">{{ item.name
                                }}</el-checkbox>
                        </template>
                    </el-checkbox-group>
                </div>
                <div class="mytable" style="margin-top:10px;text-align:left" v-show="show == true">
                    <div>
                        <label>以下职务不可选,因为该组织的这些职务已经使用</label>
                    </div>
                    <template v-for="item in list">
                        <el-tag :key="item.id" v-if="item.isBan == 1" style="margin-top:10px;margin-left:10px" type="info"
                            size="mini">{{ item.name
                            }}</el-tag>
                    </template>
                </div>
                <el-button style="margin-top:30px" id="btn" :disabled="checkList.length == 0" type="primary"
                    @click="certain" size="mini">
                    确认
                </el-button>

            </div>
        </el-skeleton>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getRights, getNotConfigZhiwuByOrg, getConfigDisabledOrg,addRightConfig} from '../../../api/Right/config/index'
import { GetOrganizations } from '../../../api/user/user'
import { ElMessage } from 'element-plus'
import router from '@/router'
export default defineComponent({
    setup() {
        const data=reactive({
            dataes: [],//权限数据
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            //组织(该配置会适用的组织)数据
            datatree: [],
            defaultPropstwo: {
                children: 'children',
                label: 'name'
            },
            // orgs: [],//组织(该配置会适用的组织)
            ids:[],
            qids: [],//权限
            checkList: [],
            list: [] as any[],
            dialogzuzhiVisible: false,//组织职务对话框
            zuzhiload: false,//职务骨架屏加载
            show: true,
            CheckedData: [] as any[],
            id: '',
            data:[],
            checked:[],
            page:1,
            name:'',
            gjloading:true
        })

        const events={
            //确定
            certain(){
                console.log(data.checkList);
                if (data.checkList.length > 0) {
                    data.checkList.forEach((item: any) => {
                        var CheckedData = data.CheckedData.find((d: any) => d.oid == data.id)
                        CheckedData.children.push(data.list.find((d: any) => d.id == item))
                    })
                }
                console.log(data.CheckedData);

                data.dialogzuzhiVisible = false;
            },
             //权限数据
             tree() {
                getRights({
                    page: data.page,
                    limit: 999
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.dataes = res.data.data
                        data.gjloading=false
                    }
                })
            },
            //组织(该配置会适用的组织)
            treetwo() {
                getConfigDisabledOrg({

                }).then((res: any) => {
                    data.ids = res.data
                })
                setTimeout(() => {
                    GetOrganizations({
                        page: data.page,
                        limit: 999
                    }).then((res: any) => {
                        console.log('==========', res)
                        if (res.result == 0) {
                            data.datatree = res.data.data
                            events.digui(data.datatree)
                            data.gjloading=false
                        }
                    })
                }, 800)

            },
            //递归
            digui(datad: any) {
                datad = Array.from(datad);
                datad.forEach((res: any) => {
                    if (data.ids.find((d: any) => d == res.id) != undefined) {
                        res.disabled = true
                    }
                    events.digui(datad = res.children)
                })
            },
            //权限选中改变
            rightchange(datar: any, check:any) {
                data.qids = []
                console.log('---///---',datar)
                console.log('check',check.checkedKeys)
                data.qids = check.checkedKeys
                console.log('选中权限',data.qids)
            },
            //组织选中改变
            zuzhichange(obj: any, bool: any) {
                data.zuzhiload = true;
                console.log("obj", obj)
                console.log("bool", bool)
                if (bool == true) {
                    data.checkList = [];
                    getNotConfigZhiwuByOrg({ id: obj.id }).then((res: any) => {
                        console.log(res)
                        data.list = res.data;
                        var num = 0;
                        data.list.forEach((item: any) => {
                            if (item.isBan == 0) {
                                num += 1;
                            }
                        })
                        data.list.length > num ? data.show = true : data.show = false;
                        data.zuzhiload = false
                    })
                    data.id = obj.id;
                    data.CheckedData.push({
                        oid: obj.id,
                        oname: obj.name,
                        children: [],
                    })
                    data.dialogzuzhiVisible = true;
                } else {
                    if (data.CheckedData.length > 0) {
                        data.CheckedData.forEach((item: any, i: any) => {
                            if (item.oid == obj.id) {
                                data.CheckedData.splice(i, 1)
                            }
                        })
                    }
                }
            },
            xz(){
                var orgs:any = [];
                var zwids:any = [];
                data.CheckedData.forEach(item => {
                    zwids = [];
                    item.children.forEach((item2:any) => {
                        zwids.push(item2.id);
                    })
                    orgs.push({
                        id: item.oid,
                        isAll: false,
                        zwids: zwids
                    })
                })
                console.log("999999", orgs);
                var obj={
                    name:data.name,
                    orgs:orgs,
                    rids:data.qids
                }
                addRightConfig(
                    obj
                ).then((res:any)=>{
                    if(res.result==0){
                        ElMessage({
                            message: '添加成功',
                            type: 'success',
                        })
                        router.push("/right/config")
                    }else{
                        ElMessage({
                            message: '添加失败',
                            type: 'error',
                        })
                    }
                })
            },
            goback(){
                router.go(-1)
            }
        }

        onMounted(()=>{
            events.tree();
            events.treetwo();
        })

        return{
            ...toRefs(data),
            ...events
        }
    },
})
</script>
